<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas圆形进度条</title>
</head>

<body>

    <canvas id="canvas" data-percent="10"></canvas>

    <script>

        var $ = document.querySelector.bind(document);
        var canvas = $('#canvas'),
            canvasWth = 500;
        canvasHgt = 500;
        canvas.width = canvasWth;
        canvas.height = canvasHgt;
        canvas.style.backgroundColor = '#999';
        var ctx = canvas.getContext('2d');


        ctx.beginPath();
        // ctx.lineWidth = 20;
        ctx.strokeStyle = '#999';
        ctx.arc(200, 200, 100, 0, 2 * Math.PI, true); // true：逆时针 false：顺时针
        ctx.stroke();
        ctx.closePath();

        // 第一圈
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#fff';
        for (var i = 0; i < 60; i++) {
            ctx.moveTo(200, 200);
            // ctx.arc(200, 200, 0, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
            ctx.arc(200, 200, 150, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
            ctx.stroke();
            ctx.closePath();
        }
        // ctx.arc(200, 200, 100, 0, 2 * Math.PI); // true：逆时针 false：顺时针
        // ctx.stroke();
        // ctx.closePath();


        ctx.beginPath();
        // ctx.lineWidth = none;
        ctx.strokeStyle = "#999";
        ctx.arc(200, 200, 150, 0, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();


        // 灰色圆环
        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.strokeStyle = '#000';
        ctx.arc(200, 200, 130, 0, 2 * Math.PI, true); // true：逆时针 false：顺时针
        ctx.stroke();
        ctx.closePath();

        // 灰色圆环
        // ctx.beginPath();
        // ctx.lineWidth = 50;
        // ctx.strokeStyle = '#000';

        // for (var i = 0; i < 30; i++) {
        //     ctx.moveTo(200, 200);
        //     // ctx.arc(200, 200, 0, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
        //     ctx.arc(200, 200, 110, 12 * i * Math.PI / 180, 12 * (i + 1) * Math.PI / 180, true);
        //     ctx.stroke();
        //     ctx.closePath();
        // }
        // // ctx.arc(200, 200, 110, 0, 2 * Math.PI, true); // true：逆时针 false：顺时针
        // // ctx.stroke();
        // // ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#003399';
        ctx.arc(200, 200, 60, 0, 2 * Math.PI); // true：逆时针 false：顺时针
        ctx.stroke();
        ctx.closePath();


        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#0000CC';
        ctx.arc(200, 200, 50, 0, 2 * Math.PI); // true：逆时针 false：顺时针
        ctx.stroke();
        ctx.closePath();



        // 旋转改变开始位置
        ctx.translate(200, 200);
        ctx.rotate(2 * Math.PI * (270 / 360));
        ctx.translate(-200, -200);

        // 绿色进度(+号表示字符串转整数)
        var percent = +canvas.dataset.percent;
        function progress() {
            percent++;
            if (percent <= 100) {
                // 角度
                percent = percent > 100 ? 100 : percent;
                var ang = Math.round(360 * percent / 100 % 360);
                // 进度条
                ctx.beginPath();
                ctx.lineWidth = 60;
                ctx.strokeStyle = '#03C96A';
                ctx.arc(200, 200, 93, 2 * Math.PI * (ang / 360), 2 * Math.PI, true); // true表示顺时针
                ctx.stroke();
                ctx.closePath();
                // 文本
                ctx.save(); // 保存上一个状态
                ctx.translate(200, 200);
                ctx.rotate(2 * Math.PI * (-270 / 360));
                ctx.translate(-200, -200);
                ctx.clearRect(180, 180, 54, 30); // 清楚上次的文本绘制
                ctx.font = '20px seris';
                ctx.fillStyle = '#fff';
                ctx.fillText(percent + '%', 180, 205);
                ctx.restore(); // 恢复上一个状态
                // 请求动画针
                window.requestAnimationFrame(progress);
            }
        }
        progress();
    </script>
</body>

</html>